scrapbox 用 chrome拡張作りたい

このプロジェクト、ハッシュタグがよくわかんないことになってる気がするので一覧化させたいとおもっている

f12でページのつくりを見てみると、

https://scrapbox.io/files/63b3924ccf086b001d73edcc.png

なんか取れそうな気がしている

考えてると別にchrome 拡張じゃなくていい気がしてきた( web クローラーとか) けど拡張機能を作る過程でjavascriptとかhtmlとか触ってみたいという思いがあるので先に進む

作成の見通し

hashタグの一覧表示

extensionボタンクリック起点で、全探索・popupにhashタグの一覧表示

javascriptでurl指定で新規タブ・新規windowで開けるみたいだけど、全記事開かせるのは触ってて嫌に感じそう...

dom要素の取得について

popup.jsはuiエレメントであり、開いたdom要素を取得することができなそう？

service_workerとして動作させるbackground.jsもできなそう

content.jsは可能

extensionボタンクリック起点では、やりたいことが実現できなそうか...

ここ以外のプロジェクトでも動作できるようにする

manifest.jsonにhost_permissionsを加えることで回避できる

cross origin resource sharing(CORS)

気になってる点

hashTagのhrefは取れたが、なんていうハッシュタグの名前かという点が一息にはとれない

普通に記事作っている際に、ハッシュタグを打とうとすると、作成途中の中途半端な文字列で保存を行ってしまっている

さすがにひどいのでせめて手動で消せるようにしたら自分的にたすかる

対策としてイケてない感はあるけど、、勉強のためだから、

chrome.storage.local.remove(key)で消せる

cssの参考

×の参考

横並びの参考

flexが便利で使いやすいらしい

page内に記載しているurl内の#-- をハッシュタグとして見てしまっている

github

いっちょ前にライセンスをつけてみている

デモ動作

https://scrapbox.io/files/63cb8048cb5dee001d7c3d7d.gif